

<script setup>

import {useRouter} from "vue-router";
const router = useRouter()
const onClickLeft = () =>{
  router.push("/user/login")
}
</script>


<template>

  <div class="box">
    <!-- autoplay 自动播放  loop循环播放  muted 声音 preload 预加载 -->
<!--    <video autoplay loop muted preload-->
<!--           style="width: 100%; height: 100%; object-fit: fill">-->
<!--      <source src="../assets/动态背景.mp4">-->
<!--    </video>-->
    <img src="../assets/动态背景11.gif" style="width: 100%; height: 100%; object-fit: fill" alt="">


    <van-nav-bar
        class="return"
        left-arrow
    />
    <div style="width: 100%; height: 100px; position: absolute; top: 0; left: 0; z-index: 1;">
      <img src="../assets/最终返回键.png" class="back-btn1" alt="返回" @click="onClickLeft" />

    </div>

    <div class="haha">
      <van-form @submit="onSubmit">
        <van-cell-group inset class="registerBackground">
          <br>
          <van-field
              v-model="userAccount"
              name="账户"
              label="账号"
              placeholder="账号,只能由字母和数字组成"
              :rules="[{ required: true, message: '请填写账号' }]"
          />
          <br>
          <van-field
              v-model="userPassword"
              type="password"
              name="密码"
              label="密码"
              placeholder="请输入不少于8位的密码"
              :rules="[{ required: true, message: '请填写密码' }]"
          />
          <br>
          <van-field
              v-model="checkPassword"
              type="password"
              name="密码"
              label="确认密码"
              placeholder="确认密码"
              :rules="[{ required: true, message: '请填写确认密码' }]"
          />
          <br>

        </van-cell-group>


        <div style="margin: 20px;">

          <van-button round block  native-type="submit" class="ha">
            <div class="characters">注册</div>
          </van-button>
        </div>
      </van-form>
    </div>
  </div>

</template>


<style scoped>
.back-btn1 {
  position:absolute;
  float: left;
  top: -5px;
  width: 50px;
  height: 60px;
  z-index:2;
}

* {
  margin: 0;
  padding: 0;
}
.characters{
  font-size: 20px;
  font-weight: bolder;
  font-family: STXingkai,serif  ;
}
.registerBackground{
  font-size: 18px;
  letter-spacing: 5px;
  font-family: Arial,serif;
  font-weight: bold;
  background-image: url("../assets/登录栏.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.ha{
  background-image: url("../assets/最终长框按钮.png");


  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;


  border-radius: 10px;
  font-weight: bold;

}

.haha{
  position: absolute;
  left: 20px;
  top: 150px;
  width: 90%;
  height: 60%;
  opacity: 0.8
}

.box{
  width: 100%;
  height: 100%;
}

.return{
  position: absolute;
  top: 0;
}

</style>